<template>
	<view class="container">
		<view class="detail_xq">
			<view class="address">
				<view class="one flex flex-align">
					<view class="wenben">姓名</view>
					<input type="text" placeholder="请输入真实姓名" v-model="name" />
				</view>
				<view class="one flex flex-align">
					<view class="wenben">手机号</view>
					<input type="number" placeholder="请输入手机号" v-model="phone" />
				</view>
				<image src="https://firework.cyx.zzcyx1688.cn/web/static/line.jpg" mode=""></image>
			</view>
			<view class="shop_cart">
				<!-- <view class=" flex flex-align">
					<tui-icon name="shop" :size="18" color="#212121"></tui-icon>
					<view class="title">Sporty& Rich 官方旗舰店</view>
				</view> -->
				<view class="list flex" v-for="(item,index) in dataInfo.order" :key = 'index'>
					<image :src="item.goods_cover" mode="widthFix" class="left"></image>
					<view class="right">
						<view class="one uni-ellipsis">{{item.goods_name}}</view>
						<view class="chima uni-text-gray">{{item.goods_spec}}</view>
						<view class="price flex flex-align flex-bt">
							<view class="jiage">￥{{item.price_selling}}</view>
							<view  class="num">x {{item.stock_sales}}</view>
						</view>
					</view>
				</view>
				<!-- <view class="xinxi_list flex flex-align flex-bt  ">
					<view class="left uni-font24">购买数量</view>
					<view class="right "><tui-numberbox :max="99" :min="1" :disabled="true" :value="value" @change="change"></tui-numberbox></view>
				</view> -->
				<view class="xinxi_list flex flex-align flex-bt  " v-if="dataInfo.amount_express!=0">
					<view class="left uni-font24">发货方式</view>
					<view class="right uni-font24">快递费用 ￥{{dataInfo.amount_express}}</view>
				</view>
				<!-- <view class="xinxi_list flex flex-bt " style="margin-top: 30rpx;">
					<view class="left ">买家留言</view>
					<view class="right ">
						<textarea  placeholder="买家留言    选填：建议填写内容前先与卖家沟通" v-model="remark"></textarea>
					</view>
				</view> -->
				<view class="xiaoji flex flex-end flex-align">
					<view class="uni-font24 uni-text-gray">共{{ dataInfo.number_goods }}件</view>
					<view class="wenzi">小计:</view>
					<view class="price">￥{{dataInfo.amount_total}}</view>
				</view>
			</view>
			<!-- <view class="dixian">
				
				<view class="list  flex flex-align flex-bt">
					<view class="left flex flex-align">购物赠送积分 <tui-icon name="explain-fill" :size="14" color="#808080"></tui-icon></view>
					<view class="right">{{dataInfo.balance2}}</view>
				</view>
				<view class="list  flex flex-align flex-bt">
					<view class="left">积分抵现({{userInfo.balance2}})</view>
					<view class="right flex flex-align flex-end" style="margin-right: -30rpx;">
						<view class="one" v-if="userInfo.balance2==0">暂无可用</view>
						<view class="switch"><switch color="#bbe68d" @change="setDefault" :checked="is_xuan" style="transform: scale(.7);" /></view>
					</view>
				</view>
				<view class="list  flex flex-align flex-bt">
					<view class="left">优惠券</view>
					<view class="right flex flex-align">
						<view style="color: #999;" class="" v-if="dataInfo.coupon_price==0">暂无可用优惠券</view>
						<view style="color:#77b733;" class="" v-else>-{{dataInfo.coupon_price}}</view>
						<tui-icon name="arrowright" :size="24" color="#333"></tui-icon>
					</view>
				</view>
			</view> -->
			<view class="" style="height: 170rpx;"></view>
			<view class="footer">
				<view class="flex flex-align flex-end">
					<view class="zongji">总计:</view>
					<view class="price">￥{{data.money||0}}</view>
					<view class="btn hei" @click="goPays">提交预约</view>
				</view>
			</view>
		</view>
		<!-- <tui-payment :show="show"  @close="guanbi" @finish='submite' :data="data"></tui-payment> -->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="jilu_list">
				<view class="index_qiang" v-for="(item,index) in dataList" :key="index" @click="selectRadio(item)">
					<view class="flex">
						<view class="left flex flex-align">
							<view class="one">￥</view>
							<view class="two">{{item.price}}</view>
							<view class="tree">
								<view class="wenzi">{{item.name}}</view>
							</view>
						</view>
						<view class="right flex flex-end">
							<radio value="" :checked="item.ischeck" style="transform: scale(.7);" color="#bbe68d" />
						</view>
					</view>
					
				</view>
				<view class="view-btns flex flex-align">
					<view class="view-btn flex-1 goBuy" @click="getTab">确定</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				value:1,
				is_xuan:false,
				show:false,
				addressInfo:[],
				dataInfo:'',
				userInfo:'',
				id:'',
				remark:'',
				data:{money:'',yue:''},
				isShow:false,
				balance2:'',
				coupon_id:'',
				popupShow:false,
				dataList:[],
				isRadio:'',
				Radio1:'',
				Radio2:'',
				Radio3:[],
				name:'',
				phone:''
			}
		},
		onLoad(e) {
			let that = this
			that.id = e.id
		},
		onShow() {
			this.get_data()
			this.get_list()
			this.getData()
		},
		methods: {
			hidePopup(){
				this.popupShow = false
			},
			openYhq(){
				if(this.dataList.length==0){
					return
				}
				this.popupShow = true
			},
			getTab(){
				let that = this
				that.Radio3 = []
				that.dataList.map((item)=>{
					if(item.ischeck){
						that.Radio3.push(item)
					}
				})
				console.log(that.Radio3)
				return
				that.counts()
				that.popupShow = false
			},
			selectRadio(e){
				let that = this
				that.dataList.map((item,index)=>{
					if(e.id==item.id){
						item.ischeck = !item.ischeck
					}
				})
				that.$forceUpdate()
				console.log(that.dataList)
			},
			counts(){
				let that = this
				if(that.is_xuan&&that.Radio2!=''){
					that.data.money=(parseFloat(that.dataInfo.amount_real) - parseFloat(that.userInfo.balance2/that.userInfo.balance2_scale)-parseFloat(that.Radio1.price)).toFixed(2)
				}else if(that.is_xuan&&that.Radio2==''){
					that.data.money=(parseFloat(that.dataInfo.amount_real) - parseFloat(that.userInfo.balance2/that.userInfo.balance2_scale)).toFixed(2)
				}else if(!that.is_xuan&&that.Radio2==''){
					that.data.money=that.dataInfo.amount_real
				}else if(!that.is_xuan&&that.Radio2!=''){
					that.data.money=(parseFloat(that.dataInfo.amount_real) - parseFloat(that.Radio1.price)).toFixed(2)
				}
				if(that.data.money<=0){
					that.data.money = 0.01
				}
			},
			onAddress() {
				if(this.addressInfo){
					uni.navigateTo({
						url: '/pages/address/address'
					})
				}else{
					uni.navigateTo({
						url: '/pages/address/eit_address'
					})
				}
				
			},
			go_url(e){
				console.log(e)
				let that = this
				that.tui.href(e)
			},
			getList(){
				let that = this
				that.tui.request('api.auth.nutrition/couponOrderList', "POST",{price:that.dataInfo.amount_real}, false, false, true).then((res) => {
					that.dataList = res.data.list
					res.data.list.map((item,index)=>{
						item.ischeck = false
					})
				}).catch((res) => {})
			},
			setDefault(){
				let that = this
				that.is_xuan = !that.is_xuan
				that.counts()
			},
			fukuan(){
				this.show = true
			},
			guanbi(){
				this.show = false
			},
			submite(e){
				let that = this
				that.value = e
				that.goPays()
			},
			get_list() {
				let that = this
				that.tui.request("api.auth.address/get", "GET", {page:1}, false, true, true).then((res) => {
					that.addressInfo = res.data.list[0]
					if(that.addressInfo){
						that.isShow = true
					}else{
						that.isShow = false
					}
				}).catch((res) => {})
			},
			get_data(){
				let that = this
				that.tui.request("api.auth.order/orderDetail", "get", {order_no:that.id}, false, true, false).then((res) => {
					console.log(res)
					that.dataInfo = res.data.info
					that.data.money=that.dataInfo.amount_real
					that.getList()
				}).catch((res) => {})
			},
			getData() {
				let that = this
				that.tui.request("api.auth.center/get", "GET", {}, false, true, true).then((res) => {
					that.name = res.data.info.username
					that.phone = res.data.info.phone
				}).catch((res) => {})
				
				
			},
			goPays(){
				let that = this
				
				let data = {address_name:that.name,order_no:that.id,address_phone:that.phone}
				that.tui.request("api.auth.order/perfect", "post", data, false, true, true).then((res) => {
					if(res.code==1){
						that.tui.request("api.auth.order/payment", "post", {order_no:that.id,payment_code:'M8061445630846953280'}, false, true, false).then((ddd) => {
							if(ddd.code==1){
								uni.redirectTo({
									url:'/pages/dingdan/dingdan?type=2'
								})
								return
								uni.requestPayment({
									timeStamp: ddd.data.param.timeStamp,
									nonceStr: ddd.data.param.nonceStr,
									package: ddd.data.param.package,
									signType: ddd.data.param.signType,
									paySign: ddd.data.param.paySign,
								    success: function (res) {
								        console.log('success:' + JSON.stringify(res));
										setTimeout(function(){
											uni.redirectTo({
												url:'/pages/shop/success?money='+that.data.money
											})
										},1000)
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
								
							}
						}).catch((ddd) => {})
					}
				}).catch((res) => {})
				
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f5f5f5;}
	.btn{height: 90rpx;line-height: 90rpx;text-align: center;background: #f20;color: #fff;border-radius: 6rpx;}
	.detail_xq{padding: 30rpx;
		.address{background: #fff;padding: 10rpx 20rpx 40rpx 40rpx;border-radius: 10rpx;margin: 0rpx 0 30rpx;position: relative;
			image{width: 100%;height:6rpx ;position: absolute;bottom: 0;left: 0;}
			.one{height: 100rpx;border-bottom: 1px solid #eee;
				.wenben{width: 120rpx;}
				input{font-size: 14px;width: 100%;}
			}
		}
		.shop_cart{background: #fff;padding: 30rpx 30rpx 16rpx;
			.list{margin-top: 20rpx;
				.left{width: 180rpx;height: 180rpx;margin-right: 20rpx;}
				.right{width: 100%;
					.one{width: 460rpx;font-weight: bold;font-size: 30rpx;}
					.chima{margin: 6rpx 0 ;color: #999;}
					.price{margin-top: 20rpx;
						.jiage{font-weight: bold}
					}
				}
			}
			.title{padding-left: 10rpx;}
		}
		.xinxi_list{margin-top:20rpx;
			.left{width: 300rpx;}
			.right{
				textarea{width: 500rpx;font-size: 26rpx;height: 100rpx;padding-top: 6rpx;line-height: 1.6;}
			}
		}
		.xiaoji{
			margin: 30rpx 0 10rpx;
			.wenzi{margin: 0 10rpx 0 0;font-size: 24rpx;}
			.price{font-weight: bold;font-size: 34rpx;}
		}
	}
	.dixian{
		background: #fff;padding: 30rpx 30rpx 16rpx;margin-top: 30rpx;
		.list{margin-bottom: 20rpx;border-bottom: 1px solid #eee;padding-bottom: 20rpx;}
	}
	.bold{font-weight: bold;}
	.border_b{border-bottom: 1px solid #ccc;padding-bottom: 20rpx;}
	.footer{position: fixed;width: 100%;bottom: 0;left: 0;padding: 40rpx 30rpx;background: #fff;box-sizing: border-box;
		.btn{padding: 0 50rpx;margin-left: 20rpx;border-radius: 4rpx;}
		.price{font-weight: bold;font-size: 34rpx;margin-left:10rpx;}
	}
	.red{color: #b40000;}
	.jilu_list{padding:30rpx ;}
	.index_qiang{background: url('https://firework.cyx.zzcyx1688.cn/web/static/home/index_yhq.png') no-repeat;background-size: 100% 100%;margin:0 0 20rpx;padding:40rpx 0 40rpx 40rpx;position: relative;
		.left{width: 450rpx;background: linear-gradient(to right, #61ae3d, #397824); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
			  -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
			  -webkit-text-fill-color: transparent;/*给文字设置成透明*/
			.one{font-size: 24rpx;padding-top: 20rpx;}
			.two{font-size: 74rpx;font-weight: bold;}
			.tree{
				.wenzi{font-size: 24rpx;padding-left: 10rpx;margin-bottom: 6rpx;}
			}
		}
		.right{width: 225rpx;padding:15rpx 0 0 70rpx ;position: absolute;top: 50rpx;right: 40rpx;
			view{width:170rpx;height: 48rpx;background: linear-gradient(to right,#fdc57a,#fda36f);border-radius: 48rpx;text-align: center;color: #fff;line-height: 48rpx;font-size: 24rpx;}
		}
		
	}
	.view-btn{
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #f20;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang;
		font-weight: 700;
		color: #fff;	margin: 30rpx 0;
	}
</style>